<template>
  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :default-openeds="['1', '2']">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>用户</template>
        <el-menu-item-group>
          <template slot="title">管理员</template>
          <el-menu-item index="1-1"
            ><router-link to="/dashboard/admin"
              >管理员管理</router-link
            ></el-menu-item
          >
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="用户显示">
          <el-menu-item index="1-3"
            ><router-link to="/dashboard/user"
              >用户管理</router-link
            ></el-menu-item
          >
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-menu"></i>商品管理</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="2-1"
            ><router-link to="/dashboard/category"
              >分类管理</router-link
            ></el-menu-item
          >
          <el-menu-item index="2-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="2-3"
            ><router-link to="/dashboard/goods"
              >商品列表</router-link
            ></el-menu-item
          >
        </el-menu-item-group>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title"
          ><i class="el-icon-setting"></i>订单管理</template
        >
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="3-1"
            ><router-link to="/dashboard/orders"
              >订单管理</router-link
            ></el-menu-item
          >
          <el-menu-item index="3-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="3-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="3-4">
          <template slot="title">选项4</template>
          <el-menu-item index="3-4-1"
            ><router-link to="/dashboard/earnings"
              >财报</router-link
            ></el-menu-item
          >
        </el-submenu>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title"
          ><i class="el-icon-setting"></i>页面管理</template
        >
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="3-1"
            ><router-link to="/index">商城首页</router-link></el-menu-item
          >
          <el-menu-item index="3-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="3-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="3-4">
          <template slot="title">选项4</template>
          <el-menu-item index="3-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
    </el-menu>
  </el-aside>
</template>

<style scoped>
.el-aside {
  color: #333;
}
::v-deep a {
  color: black;
}
::v-deep li .is-active a {
  color: rgb(64, 158, 255);
  font-weight: bolder;
  border-bottom-color: black;
}
</style>